<template>
    <div class="catagory-container">
        <Header>
            <template #login-search>
                <div  data-v-219d0c78="" class="mo-search-box search-content" style="--h: 40px;">
                    <div  class="el-select file-type">
                        <div class="el-input el-input--suffix"><input type="text" readonly="readonly"
                                autocomplete="off" placeholder="请选择" class="el-input__inner"><span
                                class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                        class="el-select__caret el-input__icon el-icon-arrow-up"></i></span></span>
                        </div>
                        <div class="el-select-dropdown el-popper filetype-dropdown"
                            style="display: none; min-width: 110px;">
                            <div class="el-scrollbar" style="">
                                <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                    style="margin-bottom: -22px; margin-right: -22px;">
                                    <ul class="el-scrollbar__view el-select-dropdown__list">
                                        <li  class="el-select-dropdown__item selected"><span>全部格式</span>
                                        </li>
                                        <li  class="el-select-dropdown__item"><span>PPT模板</span></li>
                                        <li  class="el-select-dropdown__item"><span>Word模板</span></li>
                                        <li  class="el-select-dropdown__item"><span>Excel模板</span></li>
                                    </ul>
                                </div>
                                <div class="el-scrollbar__bar is-horizontal">
                                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                                </div>
                                <div class="el-scrollbar__bar is-vertical">
                                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                                </div>
                            </div>
                        </div>
                    </div><input  placeholder="搜索精品文档模板">
                    <div  class="s-btn"><img 
                            src="">搜索
                    </div>
                    <div data-v-7e50815c=""  class="mo-search-helping-panel helping"
                        style="display: none;">
                        <div data-v-7e50815c="" class="history"><span data-v-7e50815c="" class="history-title">搜索历史：</span>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-1">
                            <div data-v-7e50815c="" class="num">1</div>
                            <div data-v-7e50815c="">保密协议</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-2">
                            <div data-v-7e50815c="" class="num">2</div>
                            <div data-v-7e50815c="">借款合同</div><img data-v-7e50815c=""
                                src=""
                                class="hot">
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-3">
                            <div data-v-7e50815c="" class="num">3</div>
                            <div data-v-7e50815c="">公司章程</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-4">
                            <div data-v-7e50815c="" class="num">4</div>
                            <div data-v-7e50815c="">劳务合同</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-5">
                            <div data-v-7e50815c="" class="num">5</div>
                            <div data-v-7e50815c="">合作协议</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-6">
                            <div data-v-7e50815c="" class="num">6</div>
                            <div data-v-7e50815c="">房屋租赁合同</div><img data-v-7e50815c=""
                                src=""
                                class="hot">
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-7">
                            <div data-v-7e50815c="" class="num">7</div>
                            <div data-v-7e50815c="">装修合同</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-8">
                            <div data-v-7e50815c="" class="num">8</div>
                            <div data-v-7e50815c="">采购合同</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-9">
                            <div data-v-7e50815c="" class="num">9</div>
                            <div data-v-7e50815c="">公司考勤管理制度</div>
                        </div>
                        <div data-v-7e50815c="" class="rank-item rank-item-10">
                            <div data-v-7e50815c="" class="num">10</div>
                            <div data-v-7e50815c="">民事起诉状模板</div><img data-v-7e50815c=""
                                src=""
                                class="hot">
                        </div>
                    </div>
                </div>
            </template>
        </Header>
        <div class="mo-types">
            <div class="categories">
                <div class="the-1st-categories-content">
                    <!-- <div class="category-item category-item-1st category-item-1st-choosed">合同协议</div> -->
                    <div class="category-item category-item-1st" v-for="level0, index of catagoryData.level0"
                        :class="(level0.id === activeLevel.level0Id) ? 'category-item-1st-choosed' : ''"
                        @click="click0Event(level0, index)">{{ level0.name }}{{ level0.id }}---{{ activeLevel.level0Id }}
                    </div>
                </div>
                <div class="the-2nd-categories-content">
                    <!-- <div class="category-item category-item-2nd category-item-2nd-choosed " ></div> -->
                    <div class="category-item category-item-2nd " v-for="level1, index of catagoryData.level1.childlist"
                        :class="level1.id == catagoryData.currentLevel.pid ? 'category-item-2nd-choosed' : ''"
                        @click="click1Event(level1, index)">{{ level1.name }} </div>
                </div>
                <div class="the-3rd-categories-content" v-for="level2, index of catagoryData.level2.childlist">
                    <div class="category-item category-item-3rd"
                        :class="level2.id == catagoryData.currentLevel.id ? 'category-item-3rd-choosed' : ''"
                        @click="click2Event(level2, index)">{{ level2.name }}</div>
                </div>
                <div class="the-4th-categories-content">
                    <div class="category-item" style="color: black;">内容：</div>
                    <div class="category-item category-item-4th" v-for="level3, index of catagoryData.level3.childlist"
                        :class="level3.id === activeLevel.level3Id ? 'category-item-4th-choosed' : ''"
                        @click="click3Event(level3, index)">{{ level3.name }}</div>
                </div>
            </div>
            <div class="sort-container">
                <div class="sort-type"> <span :class="sortType == '0' ? 'sort-type-active' : ''" @click="sortType = 0">综合排序</span>
                </div>
                <div class="sort-type"><span :class="sortType == '1' ? 'sort-type-active' : ''" @click="sortType = 1">热门下载</span>
                </div>
                <div class="sort-type" style="border: 0;"><span :class="sortType == '2' ? 'sort-type-active' : ''"
                        @click="sortType = 2">最新上传</span></div>
            </div>
            <div class="mo-file-card-list">
                <div class="grid-list">
                    <div class="my-card-item" v-for="item, index of docList" @mouseover="downloadBtnId = item.id"
                        @mouseleave="downloadBtnId = ''">
                        <div class="card-title">
                            <img :src="setDocTypeIcon(item)" alt="" class="file-icon">
                            <div class="card-title-text">
                                <div class="main-text">{{ item.title }}</div>
                                <div class="subtitle-text">
                                    {{ item.type }}<span>丨</span>A4标准打印 <span>丨</span>可修改
                                </div>
                            </div>

                        </div>
                        <div class="card-content">
                            <!-- <img :src="item.cover_image" alt="" class="good-image"> -->
                            <img src="@/assets/img/post.jpg" alt="" class="good-image">
                            <div class="show-hover" v-show="item.id === downloadBtnId">
                                <div class="mo-large-btn" @click="toGoodDetailPage(item)">
                                    <img src=""
                                        alt="">
                                    点击下载
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="bottom-text">
                                {{ item.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mo-footer">
                <div class="services">
                    <div class="service-item">
                        <img src="@/assets/img/s1.png" alt="">
                        全站精品
                    </div>
                    <div class="service-item">
                        <img src="@/assets/img/s2.png" alt="">
                        高速下载
                    </div>
                    <div class="service-item">
                        <img src="@/assets/img/s3.png" alt="">
                        优质服务
                    </div>
                    <div class="service-item">
                        <img src="@/assets/img/s4.png" alt="">
                        下载即用
                    </div>
                </div>
                <div class="content">
                    <div class="c-left">
                        <div class="logo-content">
                            <img src="@/assets/img/logo_wtx.png" alt="">
                            <div class="logo-text">
                                <img src="@/assets/img/logo_text.png" alt="">
                                提高您的办公效率
                            </div>
                        </div>
                        <!-- <div class="qr">
                            <img src="" alt="">
                            关注官方微信公众号 
                        </div> -->
                    </div>
                    <div class="links-and-copyright">
                        <div class="links">
                            <div>网站声明</div>
                            <div>侵权处理</div>
                            <div>关于我们</div>
                        </div>
                        <div style="margin-top: 15px;">
                            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> 鄂ICP备2023007630号 </a>
                            武汉知你文化有限公司成都分公版权所有
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import Header from '@/components/header.vue'
import excel_icon from '@/assets/img/excel_icon.png'
import word_icon from '@/assets/img/word_icon.png'
import ppt_icon from '@/assets/img/ppt_icon.png'

import { ref, reactive, onMounted, computed } from 'vue';
import axios from '@/server';
import { useCatagoryStore } from '@/stores/catagory.js'
let { catagoryData, activeLevel, goodDetailData } = useCatagoryStore();

import { useRouter } from 'vue-router';
const router = useRouter();
const currentRoute = ref(router.currentRoute);




//设置level0的激活样式
const initLevel0Id = () => {
    catagoryData.list.forEach(level0 => {
        level0.childlist.forEach(level1 => {
            if (level1.id == catagoryData.currentLevel.pid) {
                activeLevel.level1Id = level1.id
                activeLevel.level0Id = level1.pid
            }
        })
    })
}
initLevel0Id();


const click0Event = (level0, index) => {
    activeLevel.level0Id = level0.id;

    catagoryData.level1 = level0;
    catagoryData.level2 = level0.childlist[0];
    catagoryData.level3 = level0.childlist[0].childlist[0];
}
const click1Event = (level1, index) => {
    activeLevel.level1Id = level1.id;
    catagoryData.level2 = level1;
    catagoryData.level3 = level1.childlist[0];
    getDocList(level1)

}
const click2Event = (level2, index) => {
    activeLevel.level2Id = level2.id;

    catagoryData.level3 = level2;
    getDocList(level2)
}
const click3Event = (level3, index) => {
    activeLevel.level3Id = level3.id;
    getDocList(level3)
}

const sortType = ref(0)//排序类型

const docList = ref([])
const getDocList = async (level) => {
    let { id, pid, name } = level;

    let data = {
        id: 7,
        pid: 6,
    }
    // let data={
    //     pid:'6',
    //     type_id:7,
    //     keyword:'',
    //     sort:'0',
    //     file_type:''
    // }
    let res = await axios({
        method: 'post',
        url: '/api/index/getFileList',
        data
    })
    docList.value = res.data || []

    docList.value = [...res.data, ...res.data, ...res.data, ...res.data, ...res.data]
}

const setDocTypeIcon = (item) => {
    if (item.type.indexOf('excel') > -1) {
        return excel_icon
    } else if (item.type.indexOf('ppt') > -1) {
        return ppt_icon
    } else {
        return word_icon
    }
}

//控制是否显示下载按钮
const downloadBtnId = ref('')

const toGoodDetailPage = (good) => {
    console.log(good);
    goodDetailData = good;
    router.push({
        path: '/good_detail',
    })
}


</script>

<style lang="less" scoped>@import url('@/assets/css/catagory.less');</style>